<template>
  <div class="content">
    <Swiper />
    <!-- 历年考卷 -->
    <div class="history">
      <div class="top">
        <div class="con">
          <!-- <p class="tit">{{ item.title }}</p> -->
          <div class="flex">
            <div class="tu" v-for="(item, index) in con" :key="index">
              <img :src="item.image" alt="" />
              <div class="wen">
                <p>{{ item.title }}</p>
                <p>
                  <span
                  class="collect"
                  @click="clickbtn(index)"
                  v-if="item.check"
                  style="background-color: #0066ff"
                >
                  {{ item.shou1 }}
                </span>
                <span class="collect" @click="clickbtn(index)" v-else>
                  {{ item.shou }}
                </span>
                <router-link to="/kown">
                  <span class="test">{{ item.test }}</span>
                </router-link>
                
                </p>
              </div>
            </div>
            <!-- <div class="tu">
              <img :src="item.image" alt="" />
              <div class="wen">
                <p>{{ item.title }}</p>
                <p>
                  <span
                  class="collect"
                  @click="click(index)"
                  v-if="item.checkk"
                  style="background-color: #0066ff"
                >
                  {{ item.shou1 }}
                </span>
                <span class="collect" @click="click(index)" v-else>
                  {{ item.shou }}
                </span>
                <router-link to="/kown">
                  <span class="test">{{ item.test }}</span>
                </router-link>
                </p>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <!-- 广告位 -->
      <Advertising />
      <!-- <div class="top">
        <div class="con" v-for="(item, index) in con" :key="index">
          <p class="tit">{{ item.title }}</p>
          <div class="flex">
            <div class="tu">
              <img :src="item.image" alt="" />
              <div class="wen">
                <p>{{ item.title }}</p>
                <p>
                  <span
                  class="collect"
                  @click="click_btn(index)"
                  v-if="item.chec"
                  style="background-color: #0066ff"
                >
                  {{ item.shou1 }}
                </span>
                <span class="collect" @click="click_btn(index)" v-else>
                  {{ item.shou }}
                </span>
                <router-link to="/kown">
                  <span class="test">{{ item.test }}</span>
                </router-link>
                </p>
              </div>
            </div>
            <div class="tu">
              <img :src="item.image" alt="" />
              <div class="wen">
                <p>{{ item.title }}</p>
                <p>
                  <span
                  class="collect"
                  @click="shou(index)"
                  v-if="item.checo"
                  style="background-color: #0066ff"
                >
                  {{ item.shou1 }}
                </span>
                <span class="collect" @click="shou(index)" v-else>
                  {{ item.shou }}
                </span>
                <router-link to="/kown">
                  <span class="test">{{ item.test }}</span>
                </router-link>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
import Advertising from "../../components/Advertising.vue";
import Swiper from "../../components/Swiper.vue";
export default {
  components: { Advertising, Swiper },
  data() {
    return {
      con: [
        {
          title: "JAVA",
          image: require("../../assets/lishi.png"),
          shou: "收藏",
          shou1: "已收藏",
          test: "测试",
          check: false,
        },
        {
          title: "PHP",
          image: require("../../assets/lishi.png"),
          shou: "收藏",
          shou1: "已收藏",
          test: "测试",
          check: false,
        },
        {
          title: "前端",
          image: require("../../assets/lishi.png"),
          shou: "收藏",
          shou1: "已收藏",
          test: "测试",
          check: false,
        },
        {
          title: "UI",
          image: require("../../assets/lishi.png"),
          shou: "收藏",
          shou1: "已收藏",
          test: "测试",
          check: false,
        },
        {
          title: "JAVA",
          image: require("../../assets/lishi.png"),
          shou: "收藏",
          shou1: "已收藏",
          test: "测试",
          check: false,
        },
        {
          title: "PHP",
          image: require("../../assets/lishi.png"),
          shou: "收藏",
          shou1: "已收藏",
          test: "测试",
          check: false,
        },
        {
          title: "前端",
          image: require("../../assets/lishi.png"),
          shou: "收藏",
          shou1: "已收藏",
          test: "测试",
          check: false,
        },
        {
          title: "UI",
          image: require("../../assets/lishi.png"),
          shou: "收藏",
          shou1: "已收藏",
          test: "测试",
          check: false,
        },
      ],
    };
  },
  mounted() {
    // chrome
    document.body.scrollTop = 0;
    // firefox
    document.documentElement.scrollTop = 0;
    // safari
    window.pageYOffset = 0;
  },
  methods: {
    clickbtn(b) {
      let that = this;
      that.con[b].check = !that.con[b].check;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  font-size: 16px;

  .history {
    width: 65%;
    margin: 0 auto;
    min-width: 1066px;
    margin-top: 6rem;

    .top {
      width: 98%;
      padding: 1rem 1%;
      background: #f5f5f5;
      box-shadow: 0px 5px 40px 0px rgba(116, 116, 116, 0.35);
      border-radius: 10px;
      justify-content: space-around;
      display: flex;
      flex-wrap: wrap;

      .con {
        margin: 10px 0;

        .tit {
          font-size: 20px;
          color: #0096f6;
          height: 30px;
        }

        .flex {
          width: 100%;
          justify-content: space-between;
          display: flex;
          flex-wrap: wrap;

          .tu {
            width: 24%;
            margin-top: 20px;

            img {
              width: 100%;
            }

            .wen {
              width: 100%;
              color: #0096f6;
              justify-content: space-between;
              display: flex;
              margin-top: 16px;

              >p {
                width: 45%;
              }

              span {
                font-size: 12px;
                padding: 0.2rem 8%;
                border-radius: 10px;
                background: #3ea4f6;
                color: #fff;
                cursor: pointer;
              }

              a {
                text-decoration: none;
              }

              a>span {
                background: #ff2c2c;
                margin-left: 8%;
              }
            }
          }
        }
      }
    }
  }
}
</style>